<template>
  <div>
      <!-- 接口地址 ： https://api.xin88.top/bilibili/recommend.json -->
      <div v-if="data" class="box">
        <div v-for="{title,season_id,new_ep: { cover, index_show },stat: { danmaku, view },} in data.data.season" :key="season_id">
            <img :src="cover" alt="">
            <div>
              <span>{{title}}</span>
              <div>
                <span>{{index_show}}</span>
                <!-- 过滤器：{{值 | 过滤器} 自动把值改成别的样子-->
                <span>{{view}}次播放 ~ {{danmaku  }}弹幕</span>
              </div>
            </div>
        </div>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
  export default {
    data() {
      return {
        data: null
      }
    },
    methods: {
      getData() {
        const url = 'https://api.xin88.top/bilibili/recommend.json'
        axios.get(url).then(res=>{
          console.log(res);
          this.data = res.data
        })
      }
    },
    mounted () {
      this.getData();
    },

    // {{danmaku | wan }} :此语法会触发过滤器
    // 过滤器选项
    filters:{
      wan(value){
        if(value >= 10000){
          value = (value / 10000).toFixed(1) + '万'
        }
        return value
      },
    },
  }
</script>

<style lang="scss" scoped>
.box{
  width: 400px;
  >div{
    display: flex;
    margin-bottom: 10px;
    >img{
      width: 130px;
      height: 80px;
    }
    >div{
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      >div{
        display: flex;
        flex-direction: column;
        color: #777;
        font-size: 0.8em;
      }
    }
  }
}
</style>

